<template>
  <div class="content-item">
    <div class="left">
        <img :src="itemList.pic" alt="">
        <div class="text">
            <div class="title">{{itemList.title}}</div>
            <van-icon name="add-o" v-if="itemList.add" @click="clickAdd(itemList.id)"/>
             <van-stepper v-else v-model="itemList.num" @change="changeNum" :name="itemList.id"/>
        </div>
    </div>
    <div class="price">￥{{itemList.price}}</div>
  </div>
</template>

<script>
import { reactive,toRefs} from 'vue'
export default {
props:['itemList','clickAdd','changeNum'],
}
</script>

<style lang="less" scoped>
.content-item {
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;
      .price {
        font-size: 16px;
        font-weight: 600;
      }
      .left {
        display: flex;
        align-items: center;
        flex: 1;
        img {
          margin-left: 10px;
          width: 60px;
          height: 60px;
          margin-right: 10px;
          border-radius: 10px;
        }
        .text {
          display: flex;
          flex-flow: column;
          justify-content: space-between;
          height: 100%;
          position: relative;
          flex: 1;
          .title {
            font-size: 16px;
          }
          .van-icon {
            color: red;
            font-size: 20px;
            position: absolute;
            right: 4px;
            bottom: 4px;
          }
        }
      }
    }
</style>
